<template>
    <footer class="footer">
        <label class="footer-label">
            月:
            <input class="footer-label-input" type="number" v-model="month" min="0" max="12" maxlength="2">
        </label>
        <label class="footer-label">
            日:
            <input class="footer-label-input" type="number" v-model="day" min="1" max="31" maxlength="2">
        </label>
        <button class="footer-button" @click="findNewList()">查询</button>
    </footer>
</template>

<script>
export default {
    name: "Footer",
    data(){
        return {
            month : 1,
            day : 1,
        }
    },
    methods:{
        findNewList(){
            if (this.month < 1 || this.month > 12){
                alert("月份填写错误")
                return
            }
            if (this.day < 1 || this.day > 31){
                alert("日期填写错误")
                return
            }

            this.$emit('findNewList', this.month + "/" + this.day);
        }
    }
}
</script>

<style scoped>
    .footer{
        position: fixed;
        left: 0;
        bottom: 0;
        height: 30px;
        width: 100%;
        padding: 2.5% 3% 0;
        border-top: #b6b6b6 solid 1px;
        background-color: white;
    }
    .footer-label{
        margin-right: 1%;
    }
    .footer-label-input{
        margin-right: 2%;
        width: 25%;
    }
    .footer-button{
        width: 20%;
        margin-right: 1%;
        cursor: pointer;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }
    input[type="number"]{
        -moz-appearance: textfield;
    }
</style>